{% extends "base.html" %}

{% block title%}
Search songs
{% endblock %}

{% block content %}
<h2 class="pageTitle">Search songs</h2>

{% if form.errors %}
  <p style="color: red;">
   Please correct the error{{ form.errors|pluralize }} below.
  </p>  
{% endif %}

{% if not query %}
    <div id="songSearchInfo">
        <p class="info">Welcome to {{SITE_NAME}}.</p>
        <p class="info">To start your search, enter the song title  and press "Enter".
    </div>
{% endif %}

<div id="songSearchFormContainer">
    <form action="" method="get">
        <table>
            {{form.as_table}}
        </table>
    </form>    
</div>

{% if songs %}
<div id="songSearchResultContainer">
 
 <div id="songSearchResultSummary">
  Found {{songs|length}} song{{songs|pluralize}} matching <strong>{{query}}</strong>
 </div> 
  
  <div id="songSearchResults">
      <table>        
        {% for song in songs %}
        <tr>
          <td><a href="{% url lyrics song.id %}">{{ song.title }}</a></td>
        </tr>
        {% endfor %}
      </table>
   </div>
</div>
{% endif %}

{% if not songs and query %}
    <div id="noSongFound">
        Sorry, but no songs were found matching <strong>{{query}}</strong>
    </div>
{% endif %}


{% endblock %}
